<!-- OA申请页面顶部的审批人流程模块 -->
<template>
    <NSpin :show="spinShow">
        <div class="approve_process_container">
            <!-- 说明文字 -->
            <div class="tip_container" v-if="hint && hint !== ''">
                <NIcon size="20" class="tip_icon">
                    <ErrorRound />
                </NIcon>
                <div class="tip_text">{{ hint }}</div>
            </div>
            <!-- 审批流程（人） -->
            <div class="process_container">
                <div style="display:flex; margin-right: 10rem;">
                    <NIcon :size="20" class="process_icon">
                        <ApprovalFilled />
                    </NIcon>
                    <span>审批流程</span>
                </div>
                <span style="font-size: 18rem;flex: 1;" :style="{ color: !workFlowList ? 'red' : '#79bb92' }">
                    {{ workFlowList ? workFlowList : '暂无配置流程，请联系管理员进行配置' }}
                </span>
            </div>
        </div>
    </NSpin>
</template>

<script setup lang="ts" >
import {
    NSpace,
    NForm,
    NInput,
    NFormItem,
    NButton,
    NScrollbar,
    NModal,
    NIcon,
    useMessage,
    NSpin,
    NSelect,
    type FormInst
} from 'naive-ui'
import { ref, onMounted, watch } from 'vue'
import { sendRequest } from '@/utils/api'
import { ErrorRound } from '@vicons/material'
import { ApprovalFilled } from '@vicons/material'

const props = defineProps({
    tips: { type: String, required: false, default: () => '' },
    code: { type: String, required: true }
})
const workFlowList = ref('')
const hint = ref(props.tips)
const spinShow = ref(false)
/** 获取工作流 */
const getWorkFlow = async (code: any) => {
    spinShow.value = true
    const [error, res] = await sendRequest({
        module: 'receiveOrDispatch',
        api: 'workFlow',
        override: {
            params: {
                functionCode: code
            }
        }
    })
    if (error) return
    if (res.code !== 0) return
    hint.value = res.data.remark || ''
    workFlowList.value = res.data.workFlowList?.length ? res.data.workFlowList?.map((it: any) => it).join(' → ') : null
    spinShow.value = false
}

onMounted(() => {
    getWorkFlow(props.code)
})

watch(() => props.code, (newValue) => {
    getWorkFlow(newValue)
});

</script>

<style scoped lang="scss">
.approve_process_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .tip_container {
        display: flex;
        margin-bottom: 5px;
        min-width: 360rem;
        max-width: 800rem;
        .tip_icon {
            margin-right: 5rem;
            color: #5fb17f;
        }
        .tip_text {
            white-space: pre-wrap;
        }
    }

    .process_container {
        display: flex;
        align-items: center;
        background-color: #d5e2d8;
        border-radius: 5rem;
        padding: 5px 15px;
        margin-bottom: 10px;
        min-width: 360rem;
        max-width: 800rem;
        min-height: 50rem;
        .process_icon {
            margin-right: 5rem;
            color: #5fb17f;
        }
    }
}
</style>